Bootstrap (фреймворк)

Bootstrap
Bootstrap
Тип	CSS-фреймворк и свободное и открытое программное обеспечение
Авторы	Марк Отто, Джейкоб Торнтон
Разработчик	Bootstrap Core Team
Написана на	JavaScript, CSS, HTML и Sass
Операционная система	кроссплатформенность
Первый выпуск	19 августа 2011
Аппаратная платформа	Web-платформа
Последняя версия	5.3.3 (20 февраля 2024);
Репозиторий	github.com/twbs/bootstrap
Лицензия	лицензия MIT
Сайт	getbootstrap.com (англ.)
	Медиафайлы на Викискладе

Bootstrap (также известен как Twitter Bootstrap^[3]^[4]^[5]) — популярный^[6]^[7] фреймворк для создания сайтов и веб-приложений с открытым исходным кодом. Включает в себя HTML- и CSS-шаблоны оформления для типографики, веб-форм, кнопок, меток, блоков навигации и прочих компонентов веб-интерфейса, включая JavaScript-расширения.

Bootstrap использует современные наработки в области CSS, JavaScript и HTML, поэтому использование данного инструмента не всегда может быть правильным решением при использовании старых браузеров^[8].

Bootstrap является одним из самых популярных проектов на гитхабе: у него около 170 тысяч звёзд^[7]

История

Bootstrap начала разрабатываться как внутренняя библиотека компании Twitter под названием Twitter Blueprint. После нескольких месяцев разработки он был открыт под названием Bootstrap 19 августа 2011 года^[9].

Основными нововведениями второй версии, появившейся 31 января 2012 года, стали 12-колоночная сетка и поддержка адаптивности^[10]. То есть с этого момента фреймворк позволяет создавать страницы, которые подстраиваются под ширину экрана.

Третья версия была выпущена 19 августа 2013 года. В ней адаптивность получила дальнейшее развитие, был осуществлён переход к концепции mobile first, оптимизации прежде всего под мобильные устройства. Дизайн по умолчанию теперь стал плоским^[11].

Работа над четвёртой версией начата 29 октября 2014 года^[12]. Альфа-версия вышла 19 августа 2015 года^[13]. Первая бета-версия выпущена 10 августа 2017 года^[14]. Вторая бета-версия выпущена 19 октября 2017^[15]. 18 января 2018 года выпущена первая стабильная версия Bootstrap 4^[16].

5 мая 2021 года увидел свет Bootstrap 5.^{[источник не указан 19 дней]}

Основные инструменты

Bootstrap представляет из себя набор файлов, подключив которые к странице, можно настроить её дизайн. Оформление проекта при этом будет типизированным, но скорость и простота разработки повысится. На практике можно использовать только некоторые классы и компонеты фреймворка, повышая гибкость дизайна^[17].

Основными инструментами Bootstrap являются:

Сетки — заранее заданные размеры колонок, которые можно сразу использовать. Например, ширина колонки 140 px относится к классу .span2 (.col-md-2 в третьей версии фреймворка), который можно использовать в CSS-описании документа.
Шаблоны — фиксированный или резиновый шаблон документа.
Типографика — инструмент описания шрифтов, определение некоторых классов для шрифтов, таких как код, цитаты и т. п.
Медиа — инструмент, предоставляющий некоторое управление изображениями и видео.
Таблицы — средства оформления таблиц, вплоть до добавления функциональности сортировки.
Формы — некоторые классы для оформления форм и некоторых событий, происходящих с ними.
Навигация — некоторые классы оформления для панелей, вкладок, перехода по страницам, меню и панели инструментов.
Алерты — инструмент оформления диалоговых окон, подсказок и всплывающих окон.

Bootstrap 4

29 октября 2014 года Марк Отто объявил, что Bootstrap 4 находится в разработке. 6 сентября 2016 года Марк приостановил работу над Bootstrap 3, чтобы высвободить время для работы над Bootstrap 4. На текущий момент было внесено более 4000 изменений к базовому коду Bootstrap 4. Первая стабильная версия вышла 18 января 2018 года.

Bootstrap 4 — это почти полностью переписанный Bootstrap 3. Перечень самых значительных изменений:

Веб шрифты по умолчанию (Helvetica Neue, Helvetica, Arial) интегрированы в Bootstrap 4 и заменены набором исходных шрифтов для оптимальной отрисовки текста на любом устройстве под любой ОС.
Переход от использования Less к Sass.
Не поддерживаются IE8, IE9 и iOS 6.
Добавлена поддержка Flexbox, а затем отключена поддержка non flexbox.
Смена основной единицы измерения с px на rem.
Увеличенный глобальный размер шрифта с 14px до 16px.
Новый компонент «карточка», обобщающий панели и другие компоненты.
Удалён шрифт значков Glyphicons.
Удалены компоненты пейджера.
Переписаны почти все компоненты, плагины jQuery и документация.

Bootstrap 5

Bootstrap 5 был официально выпущен 5 мая 2021 года^[18]^[19].

Основные изменения включают:^[20]

Новый компонент меню offcanvas.
Удаление зависимости от jQuery в пользу ванильного JavaScript.
Переписывание сетки для поддержки адаптивных желобов и столбцов, размещённых за пределами строк.
Перенос документации с Jekyll на Hugo.
Прекращение поддержки Internet Explorer^[21].
Перенос инфраструктуры тестирования с QUnit на Jasmine.
Добавление собственного набора иконок SVG.
Добавление пользовательских свойств CSS.
Улучшенный API.
Усовершенствованная система сетки.
Улучшенная настройка документов.
Обновлённые формы.
RTL-поддержка.

См. также

Примечания

↑ Release 5.3.3 — 2024.
↑ http://getbootstrap.com/
↑ Cochran, 2012.
↑ Shaw (v.2), 2014.
↑ Shaw (v.3), 2014.
↑ Usage Statistics and Market Share of Bootstrap for Websites, August 2024 (неопр.). w3techs.com. — «Bootstrap is used by 77.2% of all the websites whose CSS framework we know. This is 17.4% of all websites.» Дата обращения: 25 августа 2024.
↑ ¹ ² stars:>100000 (англ.). GitHub. Дата обращения: 25 августа 2024.
↑ Поддерживаемые браузеры (неопр.). Дата обращения: 12 января 2016. Архивировано 18 августа 2015 года.
↑ Mark Otto. Bootstrap from Twitter (неопр.). Developer Blog. Twitter (19 августа 2011). Дата обращения: 27 января 2016. Архивировано 23 февраля 2017 года.
↑ Mark Otto. Say hello to Bootstrap 2.0 | Twitter Blogs (неопр.). Developer Blog. Twitter (31 января 2011). Дата обращения: 27 января 2016. (недоступная ссылка)
↑ Bootstrap 3 released (неопр.). Bootstrap Blog (19 августа 2013). Дата обращения: 27 января 2016. Архивировано 21 октября 2016 года.
↑ Bootstrap 3.3.0 released (неопр.). Bootstrap Blog (29 октября 2014). Дата обращения: 27 января 2016. Архивировано 24 июля 2016 года.
↑ Bootstrap 4 alpha (неопр.). Bootstrap Blog (19 августа 2015). Дата обращения: 27 января 2016. Архивировано 21 августа 2015 года.
↑ Bootstrap 4 Beta (неопр.). Bootstrap Blog (10 августа 2017). Дата обращения: 6 октября 2017. Архивировано 8 октября 2017 года.
↑ Bootstrap 4 Beta 2 (неопр.). Bootstrap Blog (19 октября 2017). Дата обращения: 31 октября 2017. Архивировано 1 ноября 2017 года.
↑ Bootstrap 4 (неопр.). Bootstrap Blog (18 января 2018). Дата обращения: 19 января 2018. Архивировано 20 января 2018 года.
↑ Что такое Bootstrap (неопр.). web.spt42.ru. Дата обращения: 25 августа 2024.
↑ Release Release v5.0.0 (#33647) · twbs/bootstrap (англ.). GitHub. Дата обращения: 5 мая 2021. Архивировано 5 апреля 2022 года.
↑ Bootstrap 5 (неопр.). blog.getbootstrap.com. Дата обращения: 5 апреля 2022. Архивировано 25 марта 2022 года.
↑ Bootstrap 5 grid by MartijnCuppens · Pull Request #28517 · twbs/bootstrap (англ.). GitHub. Дата обращения: 29 сентября 2019. Архивировано 5 апреля 2022 года.
↑ v5: drop Internet Explorer support by XhmikosR · Pull Request #30377 · twbs/bootstrap (англ.). GitHub. Дата обращения: 7 апреля 2020. Архивировано 5 апреля 2022 года.

Литература

Книги

Jake Spurlock. Bootstrap. Responsive Web-Development. — O'Reilly, 2013. — 128 с. — ISBN 978-1-4493-4460-3.
David Cochran, Ian Whitley. Bootstrap Site Blueprints. — Packt, 2014. — 304 с. — ISBN 978-1-78216-453-1.
Matt Lambert. Bootstrap Site Blueprints. Volume II. — Packt, 2016. — 328 с. — ISBN 978-1-78528-109-9.
Syed Fazle Rahman. Jump Start Bootstrap. — SitePoint, 2014. — 150 с. — ISBN 978-0-9922794-3-1.
Aravind Shenoy. Learning Bootstrap. — Packt, 2014. — 204 с. — ISBN 978-1-78216-185-1.
Alexandre Magno. Mobile-First Bootstrap. — Packt, 2013. — 92 с. — ISBN 978-1-78328-579-2.
Peter Shaw. Twitter Bootstrap Succinctly. — Syncfusion, Inc., 2014. — 114 с.
Peter Shaw. Twitter Bootstrap 3 Succinctly. — Syncfusion, Inc, 2014. — 110 с.
David Cochran. Twitter Bootstrap Web Development How-To. — Packt^[англ.], 2012. — 68 с. — ISBN 978-1-84951-883-3.

Статьи и обзоры

Уче Огбуйи (Uche Ogbuji). Быстрая разработка Web-сайтов и Web-приложений с помощью Bootstrap (неопр.). IBM DeweloperWorks (29 ноября 2013).
Serdar Yegulalp. Review: Free mobile-friendly Web design frameworks. Twitter Bootstrap, HTML5 Boilerplate, 52Framework, and 320 and Up take the sting out of building websites for both large and small screens (неопр.). InfoWorld (12 сентября 2012).

Ссылки

Официальная страница (англ.)
Bootstrap GitHub (англ.)
Bootstrap in A List Apart No. 342 A List Apart (англ.)
Bootstrap 4 — документация на русском языке (рус.)
Bootstrap 5 — документация на русском языке (рус.)

[_d963960a3221e99a-1] Release 5.3.3 — 2024.

[_339a32a49d1e293f-2] ttp://getbootstrap.com/

[_e02fd5ade744736e-3] Cochran, 2012.

[_8b1a178567366f5a-4] Shaw (v.2), 2014.

[_9ea25a04bd658533-5] Shaw (v.3), 2014.

[w3techs-6] Usage Statistics and Market Share of Bootstrap for Websites, August 2024 (неопр.). w3techs.com. — «Bootstrap is used by 77.2% of all the websites whose CSS framework we know. This is 17.4% of all websites.» Дата обращения: 25 августа 2024.

[github-7] ¹ ² stars:>100000 (англ.). GitHub. Дата обращения: 25 августа 2024.

[getbootstrap-8] Поддерживаемые браузеры (неопр.). Дата обращения: 12 января 2016. Архивировано 18 августа 2015 года.

[twitter-9] Mark Otto. Bootstrap from Twitter (неопр.). Developer Blog. Twitter (19 августа 2011). Дата обращения: 27 января 2016. Архивировано 23 февраля 2017 года.

[twitter_hello-10] Mark Otto. Say hello to Bootstrap 2.0 | Twitter Blogs (неопр.). Developer Blog. Twitter (31 января 2011). Дата обращения: 27 января 2016. (недоступная ссылка)

[getbootstrap_3-11] Bootstrap 3 released (неопр.). Bootstrap Blog (19 августа 2013). Дата обращения: 27 января 2016. Архивировано 21 октября 2016 года.

[getbootstrap_3_3-12] Bootstrap 3.3.0 released (неопр.). Bootstrap Blog (29 октября 2014). Дата обращения: 27 января 2016. Архивировано 24 июля 2016 года.

[alpha-13] Bootstrap 4 alpha (неопр.). Bootstrap Blog (19 августа 2015). Дата обращения: 27 января 2016. Архивировано 21 августа 2015 года.

[beta-14] Bootstrap 4 Beta (неопр.). Bootstrap Blog (10 августа 2017). Дата обращения: 6 октября 2017. Архивировано 8 октября 2017 года.

[beta2-15] Bootstrap 4 Beta 2 (неопр.). Bootstrap Blog (19 октября 2017). Дата обращения: 31 октября 2017. Архивировано 1 ноября 2017 года.

[4_stable-16] Bootstrap 4 (неопр.). Bootstrap Blog (18 января 2018). Дата обращения: 19 января 2018. Архивировано 20 января 2018 года.

[web_spt-17] Что такое Bootstrap (неопр.). web.spt42.ru. Дата обращения: 25 августа 2024.

[18] Release Release v5.0.0 (#33647) · twbs/bootstrap (англ.). GitHub. Дата обращения: 5 мая 2021. Архивировано 5 апреля 2022 года.

[19] Bootstrap 5 (неопр.). blog.getbootstrap.com. Дата обращения: 5 апреля 2022. Архивировано 25 марта 2022 года.

[20] Bootstrap 5 grid by MartijnCuppens · Pull Request #28517 · twbs/bootstrap (англ.). GitHub. Дата обращения: 29 сентября 2019. Архивировано 5 апреля 2022 года.

[21] v5: drop Internet Explorer support by XhmikosR · Pull Request #30377 · twbs/bootstrap (англ.). GitHub. Дата обращения: 7 апреля 2020. Архивировано 5 апреля 2022 года.

[1]

[2]

[3]

[4]

[5]

[6]

[7]

[8]

[9]

[10]

[11]

[12]

[13]

[14]

[15]

[16]

[17]

[18]

[19]

[20]

[21]